Төп эчтәлеккә күчү Документлар навигациясенә күчү
in English

Кереш сүз

JsDelivr һәм шаблон стартер бите белән җаваплы, мобиль беренче сайтлар төзү өчен дөньяда иң популяр булган Bootstrap белән башлап җибәрегез.

Бу биттә

Тиз башлау

Сезнең проектка Bootstrapны тиз өстәргә телисезме? JsDelivr кулланыгыз, бушлай ачык чыганак CDN. Пакет менеджерын кулланып яки чыганак файлларын йөкләргә кирәкме? Йөкләү битенә керегез .

CSS

Безнең CSS-ны йөкләү өчен стиль таблицасын бүтән стиль таблицаларына <link>күчерегез .<head>

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

JS

Күпчелек компонентларыбыз эшләү өчен JavaScript куллануны таләп итә. Аерым алганда, алар үзебезнең JavaScript плагиннары һәм Popper таләп итәләр . Аларны эшләтеп җибәрү өчен, түбәндәге битләрнең берсен<script> битләрегезнең ахырына урнаштырыгыз </body>.

Тапшыру

Boәрбер Bootstrap JavaScript плагинын һәм безнең бәйләнешнең берсе белән бәйләнешне кертегез. Икесе дә , безнең кораллар bootstrap.bundle.jsһәм поповерлар өчен Попперныbootstrap.bundle.min.js кертәләр . Bootstrap'ка кертелгәннәр турында күбрәк мәгълүмат алу өчен зинһар, безнең эчтәлек бүлеген карагыз.

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>

Аерым

Аерым сценарийлар чишелеше белән барырга уйласагыз, Поппер башта килергә тиеш (әгәр сез инструментлар яки поповерлар кулланасыз), аннары безнең JavaScript плагиннары.

<script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-7+zCNj/IqJ95wo16oMtfsKbZ9ccEh31eOz1HGyDuCQ6wgnyJNSYdrPa03rtR1zdB" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" crossorigin="anonymous"></script>

Модульләр

Әгәр дә сез куллансагыз , зинһар, безнең модуль бүлеге буларак Bootstrap куллануга<script type="module"> мөрәҗәгать итегез .

Компонентлар

Кайсы компонентлар безнең JavaScript һәм Popper таләп итә? Түбәндәге шоу компонентлары сылтамасына басыгыз. Әгәр дә сез гомуми бит структурасы турында бөтенләй белмисез икән, бит шаблонын укуны дәвам итегез.

JavaScript таләп итүче компонентларны күрсәт
  • Эштән азат итү турында хәбәрләр
  • Штатларны алыштыру төймәләре һәм рамка / радио функциональлеге
  • Барлык слайд тәртибе, контроль, күрсәткечләр өчен карусель
  • Эчтәлекнең күренүчәнлеген алыштыру өчен таркалу
  • Күрсәтү һәм урнаштыру өчен тамчылар (шулай ук ​​Поппер кирәк )
  • Тәртипне күрсәтү, урнаштыру, әйләндерү тәртибе
  • Respаваплы тәртипне тормышка ашыру өчен безнең Collapse плагинын киңәйтү өчен Navbar
  • Күрсәтү, урнаштыру, әйләндерү тәртибе өчен оффанвазлар
  • Күрсәтү һәм эштән җибәрү өчен тостлар
  • Күрсәтү һәм урнаштыру өчен кораллар һәм поповерлар (шулай ук ​​Поппер кирәк )
  • Scrollspy әйләндерү тәртибе һәм навигация яңартулары өчен

Стартер шаблоны

Соңгы дизайн һәм үсеш стандартлары белән битләрегезне урнаштырыгыз. Димәк, HTML5 доктипын куллану һәм дөрес җаваплы тәртип өчен визута мета-тегын кертү дигән сүз. Барысын бергә туплагыз, битләрегез шулай булырга тиеш:

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

    <title>Hello, world!</title>
  </head>
  <body>
    <h1>Hello, world!</h1>

    <!-- Optional JavaScript; choose one of the two! -->

    <!-- Option 1: Bootstrap Bundle with Popper -->
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>

    <!-- Option 2: Separate Popper and Bootstrap JS -->
    <!--
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-7+zCNj/IqJ95wo16oMtfsKbZ9ccEh31eOz1HGyDuCQ6wgnyJNSYdrPa03rtR1zdB" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" crossorigin="anonymous"></script>
    -->
  </body>
</html>

Киләсе адымнар өчен, сайтның эчтәлеген һәм компонентларын урнаштыра башлау өчен Layout документларына яки рәсми мисалларга керегез.

Мөһим глобаллар

Bootstrap бик мөһим глобаль стильләр һәм көйләүләр куллана, сез аны кулланганда белергә тиеш, аларның барысы да диярлек кросс браузер стильләрен нормалаштыруга юнәлтелгән. Әйдәгез чумып алыйк.

HTML5 доктипы

Bootstrap HTML5 доктипын куллануны таләп итә. Ансыз, сез кызыклы тулы булмаган стилизацияне күрерсез, ләкин аны кертеп, бик зур тыгызлык тудырырга тиеш түгел.

<!doctype html>
<html lang="en">
  ...
</html>

Onsаваплы мета-тег

Bootstrap башта мобиль эшләнде , без мобиль җайланмалар өчен кодны оптимальләштерәбез, аннары CSS медиа соравы ярдәмендә компонентларны киңәйтәбез. Барлык җайланмалар өчен дөрес күрсәтүне һәм сенсорны зурайтуны тәэмин итү өчен , сезнең өчен җаваплы күренеш мета-тегын өстәгез <head>.

<meta name="viewport" content="width=device-width, initial-scale=1">

Сез моның мисалын стартер шаблонында күрә аласыз .

Бокс-размер

CSS-та турыдан-туры зурлау өчен без глобаль box-sizingкыйммәтне content-boxкүчәбез border-box. Бу paddingэлементның соңгы исәпләнгән киңлегенә тәэсир итмәвен тәэмин итә, ләкин ул Google Карталар һәм Google Custom Search Engine кебек өченче як программаларында проблемалар тудырырга мөмкин.

Сирәк очракта сез аны кире кагарга тиеш, түбәндәге кебек әйберләр кулланыгыз:

.selector-for-some-widget {
  box-sizing: content-box;
}

Aboveгарыдагы фрагмент белән, ояланган элементлар, шул исәптән барлыкка килгән эчтәлекне ::beforeдә кертеп, барысы да моның өчен ::afterкүрсәтелгәнне мирас итеп алалар .box-sizing.selector-for-some-widget

CSS Tricks-та бокс моделе һәм зурлыгы турында күбрәк белү .

Яңарту

Яхшыртылган кросс-браузерны күрсәтү өчен, без Reboot кулланабыз , браузерлар һәм җайланмалардагы туры килмәүләрне төзәтү өчен, шул ук вакытта гомуми HTML элементларына бераз күбрәк фикерле яңадан торгызу.

Communityәмгыять

Bootstrap үсеше турында яңартып торыгыз һәм бу файдалы ресурслар белән җәмгыятькә мөрәҗәгать итегез.

  • Рәсми Bootstrap блогына укыгыз һәм язылыгыз .
  • IRCдагы Bootstrappers белән аралашу. Серверда irc.libera.chat, #bootstrapканалда.
  • Тикшерү ярдәме Стек ташкыннан табылырга мөмкин (билгеле bootstrap-5).
  • Төзүчеләр пакетларда ачкыч сүз кулланырга тиеш, алар npm яки максималь ачыш өчен охшаш тапшыру механизмнары bootstrapаша таратканда Bootstrap функциясен үзгәртә яки өсти .

Соңгы гайбәтләр һәм искиткеч музыкаль видеолар өчен сез шулай ук ​​Твиттерда @getbootstrap артыннан бара аласыз.